<template>
  <div>
    <van-tag>      
        <span @click="showDate('start')">{{start || '选择日期'}}</span>
        ~
        <span @click="showDate('end')">{{end || '选择日期'}}</span>
    </van-tag>
    <van-popup v-model="date_range.show" position="bottom" >
      <van-datetime-picker
        v-model="date_range.currentDate"
        type="date"
        title="请选择"
        :min-date="date_range.minDate"
        :max-date="date_range.maxDate"
        @cancel="date_range.show = false"
        @confirm="getDate"
      />
    </van-popup>
  </div>
</template>

<script>
export default {
  props: {
    start: {
      type: String,
      default: () => '选择日期'
    },
    end: {
      type: String,
      default: () => '选择日期'
    },
  },
  data() {
    return {
      date_range:{
        show: false,
        type: null,
        minDate: new Date(2020, 0, 1),
        maxDate: new Date(2025, 10, 1),
        currentDate: new Date(),
      }
    };
  },
  computed: {
    currentValue: {
      get() {
        return {start: this.start, end: this.end};
      },
      set(newVal) {
        console.log(newVal);
        this.$emit("update:start", newVal.start);
        this.$emit("update:end", newVal.end);
        return newVal;
      },
    },
  },
  methods: {
    showDate(type){
      this.date_range.type = type;
      this.date_range.currentDate = new Date(this.form[type]);
      this.date_range.show = true;
    },
    getDate(value){
      console.log(this.formatDate(value));
      this.currentValue[this.date_range.type] = this.formatDate(value);
      this.date_range.show = false;
    },
    formatDate(date) {
      let year = date.getFullYear();
      let month = date.getMonth() + 1;
      let day = date.getDate();
      month = Number(month) < 10 ? "0" + month : month;
      day = Number(day) < 10 ? "0" + day : day;
      return year + "-" + month + "-" + day;
    },
  },
};
</script>